import * as echarts from 'echarts/core';
/**
 * 数据分析 人员数据分析（职务分布）——横向柱状图
 * 
 * **/
let timer = null;
const indexEchartsBar = (data, myChart) => {
    data = [50, 60, 70, 20, 30, 10, 20, 23, 43];
    var className = ['普工/操作工', '财务', '后勤', '人事行政', '品质', '工程', '学徒', '维修', '管理员'];
    var defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100];
    let currentIndex = 0; // 当前显示的柱子

    const defaultConfig = {
        grid: {
            left: '5%',
            right: '4%',
            bottom: 25,
            top: 20,
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: 'shadow',
            },
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, 1)",
            textStyle: {
                color: "#FFF",
            },
            formatter: "{b} : {c}人"
        },

        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: { //  改变x轴字体颜色和大小
                show: false
            }
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#C9C9C9',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: className.slice(currentIndex, currentIndex + 5),
            },
            {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                axisLabel: {
                    textStyle: {
                        color: '#CFEFFF',
                        fontSize: 12,
                    },

                    formatter: function (value) {
                        return value + '人';
                    },
                },
                data: data.slice(currentIndex, currentIndex + 5),
            },
        ],
        series: [
            {
                name: '人数',
                symbolSize: [5, 10],
                type: "pictorialBar",
                symbolMargin: 3,
                symbolRepeat: 'repeat',
                symbol: 'fixed',

                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: 'rgba(0, 151, 251, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(48, 236, 166, 1)',
                            },
                        ]),
                    },
                },
                data: data.slice(currentIndex, currentIndex + 5),
                animationEasing: "elasticOut"
            },
            {
                name: '背景',
                symbolSize: [5, 10],
                type: "pictorialBar",
                symbolMargin: 3,
                symbolRepeat: 'repeat',
                symbol: 'fixed',
                data: defaultData.slice(currentIndex, currentIndex + 5),
                animationEasing: "elasticOut",
                itemStyle: {
                    normal: {
                        color: 'rgba(0, 151, 251, 0.2)',
                        barBorderRadius: 0,
                    },
                },
            },
        ],
    }

    // 定义定时器函数，每两秒钟无缝播放
    const seamlessPlay = () => {
        stopSeamlessPlay()
        timer = setInterval(() => {
            currentIndex = (currentIndex + 1) % data.length; // 循环显示柱子
            const newData = [];
            const newXAxisData = [];
            
            for (let i = 0; i < 5; i++) {
                const dataIndex = (currentIndex + i) % data.length;
                newData.push(data[dataIndex]);
                newXAxisData.push(className[dataIndex]);
            }

            // 更新图表数据并设置过渡效果
            myChart.setOption({
                yAxis: [
                    {
                        data: newXAxisData,
                    },
                    {
                        data: newData,
                    }
                ],
                series: [
                    {
                        data: newData,
                    },
                ],
            });

            // 显示 Tooltip
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 0, // 默认显示第一个柱子的 Tooltip
            });
        }, 2000);

    }

    // 停止无缝播放
    const stopSeamlessPlay = () => {
        clearInterval(timer);
        timer = null;
    }

    if (myChart) {
        // 初始开始无缝播放
        seamlessPlay();

        // 鼠标经过柱状图时停止播放
        myChart.on('mouseover', () => {
            stopSeamlessPlay();
        })


        // 鼠标离开柱状图时继续播放下一个柱子
        myChart.on('mouseout', () => {
            stopSeamlessPlay();
            seamlessPlay();
        });

    } else {
        stopSeamlessPlay();
    }

    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEchartsBar
}

